<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet"  th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!--&lt;!&ndash; Tweaks for older IEs&ndash;&gt;&lt;!&ndash;[if lt IE 9]>-->
    <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]&ndash;&gt;-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<style>

</style>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}" ></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"> </script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"> </script>
<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/js/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/js/bootstrapValidator.min.js}"></script>
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>

<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">用户管理</a></li>
                <li class="breadcrumb-item active">修改密码</li>
            </ul>
        </div>
    </div>
    <!--修改用户div start -->
    <section class="forms">
        <div class="container-fluid">
            <div class="col-lg-12 mt-3">
                <div class="card">
                    <div class="card-body">
                        <form class="form-horizontal" >
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">旧密码</label>
                                <div class="col-sm-4">
                                    <input type="password" placeholder="" value=""
                                           name="oldPassword" id="oldPassword" class="form-control" />
                                </div>
                                <small class="help-block oldPasswordMsg"></small>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">新密码</label>
                                <div class="col-sm-4">
                                    <input type="password" placeholder="" value=""
                                           name="newPassword" id="newPassword" class="form-control" />
                                </div>
                                <small class="help-block newPasswordMsg"></small>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">确认密码</label>
                                <div class="col-sm-4">
                                    <input type="password" placeholder="" value=""
                                           name="newPasswordCheck" id="newPasswordCheck" class="form-control" />
                                </div>
                                <small class="help-block newPasswordCheckMsg"></small>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 offset-sm-2">
                                    <button type="button" class="btn btn-success ml-5 updatePassword">修改</button>
                                </div>
                                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" th:if="${_csrf}"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--修改用户div end -->
</div>

</body>
<script type="text/javascript">
    $(function () {
        toastr.options = {
            closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
            debug: false, //是否为调试；
            progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
            positionClass: "toast-top-center", //消息框在页面显示的位置
            onclick: null, //点击消息框自定义事件
            showDuration: "300", //显示动作时间
            hideDuration: "1000", //隐藏动作时间
            timeOut: "2000", //自动关闭超时时间
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        //旧密码校验
        $("#oldPassword").on("blur",function () {
            let oldPassword = $("#oldPassword").val();
            $.requestAjax({
                    url: $appName+"/api/user/checkPassword",
                    type: "post",
                    data: {"password": oldPassword},
                    success: function (result) {
                        if (result.success) {
                            $(".oldPasswordMsg").text("")
                            $(".updatePassword").attr("disabled",false)
                        }else{
                            $(".oldPasswordMsg").text("旧密码输入错误")
                            $(".updatePassword").attr("disabled",true)
                        }

                    }
                }
            )
        })
        $("#newPassword").on("focus",function () {
            $(".newPasswordMsg").text("")
            $(".newPasswordCheckMsg").text("")
        })
        $("#newPasswordCheck").on("focus",function () {
            $(".newPasswordMsg").text("")
            $(".newPasswordCheckMsg").text("")
        })
        //修改密码
        $(".updatePassword").on("click",function () {
            let oldPassword = $("#oldPassword").val();
            let newPassword = $("#newPassword").val();
            let newPasswordCheck = $("#newPasswordCheck").val();
            if (!oldPassword || '' ==oldPassword ) {
                $(".oldPasswordMsg").text("请输入旧密码")
                return ;
            }
            if (!newPassword || '' == newPassword) {
                $(".newPasswordMsg").text("请输入新密码")
                return ;
            }
            if (!newPasswordCheck || '' == newPasswordCheck) {
                $(".newPasswordCheckMsg").text("请确认新密码")
                return ;
            }
            if (newPassword !=newPasswordCheck) {
                $(".newPasswordCheckMsg").text("两次输入的密码不一致")
                return ;
            }
            $.requestAjax({
                    url: $appName+"/api/user/changePassword",
                    type: "post",
                    data: {"password": newPassword},
                    success: function (result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            setTimeout(function(){
                              window.location.href=$appName+"/logout"
                            },2000)
                        }else{
                            toastr.error(result.msg);
                        }

                    }
                }
            )
        })
    });

</script>
</html>